<template>
  <view :data-theme="theme">
    <view class="mp-bg">
      <view class="searchCon acea-row">
        <view class="search acea-row row-middle">
          <text class="iconfont icon-ic_search"></text>
          <input
            class="inputs"
            placeholder="输入商品或订单号搜索"
            placeholder-class="placeholder"
            placeholder-style="font-size:28rpx"
            v-model="keywords"
            @blur="search"
          />
        </view>
        <view class="btn" @click="search">
          <text>搜索</text>
        </view>
      </view>
      <scroll-view
        class="scroll-view_x"
        scroll-x
        style="white-space: nowrap; vertical-align: middle"
        show-scrollbar="false"
      >
        <view class="nav borRadius14 acea-row">
          <text
            class="item"
            :class="orderStatus == 'ALL' ? 'on' : ''"
            @click="statusClick('ALL', '')"
          >
            <text>全部</text>
          </text>
          <text
            class="item"
            :class="orderStatus == 'UNPAID' ? 'on' : ''"
            @click="statusClick('UNPAID')"
          >
            <text>待付款</text>
          </text>
          <text
            class="item"
            :class="orderStatus == 'PAID' ? 'on' : ''"
            @click="statusClick('PAID')"
          >
            <text>待发货</text>
          </text>
          <text
            class="item"
            :class="orderStatus == 'NOT_RECEIVING_CLERK' ? 'on' : ''"
            @click="statusClick('NOT_RECEIVING_CLERK')"
          >
            <text>待收货</text>
          </text>
          <text
            class="item"
            :class="orderStatus == 'COMPLETE' ? 'on' : ''"
            @click="statusClick('COMPLETE')"
          >
            <text>已完成</text>
          </text>
        </view>
      </scroll-view>
    </view>
    <view class="my-order mt270">
      <view class="list">
        <view class="item" v-for="(item, index) in orderList" :key="index">
          <view class="title acea-row row-between-wrapper">
            <view class="flex align-end">
              <view v-if="item.merName" class="flex align-center">
                <image
                  src="https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/storelogo.png"
                  class="logoer"
                  mode="scaleToFill"
                />
                <text class="topic">{{ item.merName }}</text>
              </view>
              <view v-else>
                <text class="mr10">{{ item.orderNo }}</text>
              </view>
            </view>
            <view v-if="item.refundStatus == 3" class="font_color">已退款</view>
            <template v-else>
              <view class="font_color">{{ statusList[item.status] }}</view>
            </template>
          </view>
          <view v-for="(items, indexs) in item.orderDetailList" :key="indexs">
            <view @click="goOrderDetails(item)" class="item-info flex row-top">
              <view class="pictrue">
                <image class="goodsImg" :src="items.image" mode="scaleToFill" />
              </view>
              <view class="text acea-row row-between">
                <view class="nameBox flex flex-column pd-12 justify-between">
                  <view class="name line2">
                    <span
                      v-if="item.secondType == 'ORDER_SECKILL'"
                      class="activity bg_color"
                      >{{ "秒杀" }}</span
                    >
                    <span
                      v-if="Number(item.secondType) === 1"
                      class="activity bg_color"
                      >积分</span
                    >
                    <span>{{ items.productName }}</span>
                  </view>
                  <view class="flex footerPar">
                    <view
                      class="assist fw-600 flex align-center justify-center"
                      >{{ "支持七天无理由退货" }}</view
                    ><view class="pointsPart flex align-center ml10">
                      <view class="tips fw-600">{{ "积分" }}</view>
                    </view></view
                  >
                </view>
                <view class="money pd-12">
                  <view class="price">￥{{ items.price }}</view>
                  <view class="num fw-400">x{{ items.payNum }}</view>
                  <view class="points fw-400"
                    ><text v-if="item.goodsInfo[items.productId]">+</text
                    >{{ item.goodsInfo[items.productId] }}</view
                  >
                </view>
              </view>
            </view>
            <view
              v-if="items.applyRefundNum && item.refundStatus > -1"
              class="text-24rpx font-color oppoSans-R mr-20px px-30 mt-14"
            >
              售后申请数量：{{ items.applyRefundNum }}
            </view>
          </view>
          <view class="totalPrice"
            >{{ item.totalNum }}
            件商品，总金额
            <text class="money"> ￥{{ item.payPrice }}</text>
          </view>
          <!-- 订单状态（0：待支付，1：待发货,2：部分发货， 3：待核销，4：待收货,5：已收货,6：已完成，9：已取消） -->
          <view class="bottom acea-row row-right row-middle">
            <view class="mark">
              {{ item.mark ? item.mark : "" }}
            </view>
            <view
              class="bnt cancelBnt"
              v-if="item.status === 'UNPAID'"
              @click="cancelOrder(index, item.orderNo)"
            >
              取消订单
            </view>
            <view
              class="bnt cancelBnt"
              v-if="
                item.status == 'RECEIVING_CLERK' ||
                item.status == 'CANCEL' ||
                item.status == 'SYS_CANCEL' ||
                item.status == 'COMPLETE' ||
                item.status == 'USER_CANCEL' ||
                item.status == 6 ||
                item.status == 9
              "
              @click="delOrder(item.orderNo, index)"
            >
              删除订单
            </view>
            <view
              class="bnt bg_color"
              v-if="item.status === 'UNPAID'"
              @click="goPay(item)"
            >
              立即付款
            </view>
            <view
              class="bnt bg_color"
              v-if="
                ((item.status == 'PAID' ||
                  item.status == 'CANCEL' ||
                  item.status == 'COMPLETE' ||
                  item.status == 'USER_CANCEL' ||
                  item.status == 'SYS_CANCEL' ||
                  item.status == 'PART_SHIPPER' ||
                  item.status == 'NOT_RECEIVING_CLERK' ||
                  item.status == 'REVOCATION') &&
                  item.type != 2) ||
                ((item.paid || item.status == 9) && item.type != 2) ||
                (item.type == 2 && item.groupBuyRecordStatus !== 0)
              "
              @click="goOrderDetails(item)"
            >
              查看详情</view
            >
            <view
              class="bnt bg_color"
              v-show="
                (item.status == 'NOT_RECEIVING_CLERK' &&
                  item.refundStatus !== 'PARTIAL_REFUNDED') ||
                (item.status == 4 && item.refundStatus !== 3)
              "
              @tap="confirmOrder(item)"
            >
              确认收货</view
            >
          </view>
        </view>
      </view>

      <view class="loadingicon acea-row row-center-wrapper">
        <text
          class="loading iconfont icon-jiazai"
          :hidden="loading == false"
        ></text
        >{{ orderList.length > 0 ? loadTitle : "" }}
      </view>
      <view class="noCart" v-if="orderList.length == 0 && isShow && !loading">
        <view class="pictrue">
          <image :src="urlDomain + 'crmebimage/presets/nodingdan.png'"></image>
          <view class="default_txt">暂无订单信息~</view>
        </view>
      </view>
    </view>
    <!-- 分享按钮 -->
    <view class="generate-posters" :class="posters ? 'on' : ''">
      <view class="generateCon acea-row row-middle"> </view>
      <view
        class="generateClose acea-row row-center-wrapper"
        @click="posterImageClose"
        >取消</view
      >
    </view>
  </view>
</template>

<script>
import { Debounce } from "@/utils/validate.js";
import {
  getOrderList,
  orderCancel,
  oldOrderDel,
  orderDel,
  orderInvoiceListInfo,
  express,
  orderTake,
} from "@/api/order.js";
import { mapGetters } from "vuex";
import animationType from "@/utils/animationType.js";
import orderPay from "@/mixins/OrderPay.js";
export default {
  mixins: [orderPay],
  components: {},
  data() {
    return {
      H5ShareBox: false, //公众号分享图片
      pinkPriceImg: "../static/images/pinkPrice.png",
      posterbackgd: "../static/images/posterbackgd.png",
      pinkbackgd: "../static/images/pinkShare.png",
      pinkWhiteBg: "../static/images/whiteBg.png",
      imgTop: "",
      statusList: {
        // 订单状态字典
        UNPAID: "待支付",
        PAID: "待发货",
        PART_SHIPPER: "部分发货",
        WRITE_OFF: "待核销",
        NOT_RECEIVING_CLERK: "待收货",
        RECEIVING_CLERK: "已收货",
        COMPLETE: "已完成",
        REFUND_APPLY: "退款申请",
        REFUND_SUCCESS: "退款成功",
        // CANCEL: "已取消",
        SYS_CANCEL: "超时未支付",
        USER_CANCEL: "订单取消",
        NOT_REFUND: "未退款",
        UNREFUNDED: "待审核",
        APPLYING: "商家拒绝",
        REFUNDING: "退款中",
        REFUNDED: "已退款",
        REVOCATION: "已撤销",
        RETURN_GOODS: "用户退货",
        WAIT_FOR_SHIPMENT: "商家待收货",
      },
      ProductTypeEnum: {
        Normal: 0, //基础商品
        Integral: 1, //积分
        Fictitious: 2, //虚拟,
        Video: 4, //视频号
        CloudDrive: 5, //云盘商品
        CardPassword: 6, //卡密商品
      },
      urlDomain: this.$Cache.get("imgHost"),
      navTitle: "我的订单",
      loading: false, //是否加载中
      loadend: false, //是否加载完毕
      loadTitle: "加载更多", //提示语
      orderList: [], //订单数组
      orderStatus: "ALL", //订单状态
      page: 1,
      limit: 20,
      pay_order_id: "",
      totalPrice: "0",
      isShow: false,
      // theme: app.globalData.theme,
      theme: "theme1",
      bgColor: "#e93323",
      keywords: "",
      secondType: 0, //订单二级类型:0-普通订单，1-积分订单，2-虚拟订单，4-视频号订单，5-云盘订单，6-卡密订单
    };
  },
  computed: mapGetters(["isLogin", "userInfo", "globalData", "uid"]),
  // 滚动监听
  onPageScroll(e) {
    // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
    uni.$emit("scroll");
  },
  onShow() {
    if (this.isLogin) {
      this.loadend = false;
      this.getAllOrder();
    } else {
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    setTimeout(() => {
      uni.setNavigationBarColor({
        frontColor: "#000000",
        backgroundColor: "#ffffff",
      });
    }, 300);
    if (options.status) this.orderStatus = options.status;
    if (options.secondType) this.secondType = options.secondType;
  },
  methods: {
    //确认收货
    confirmOrder: Debounce(function (data) {
      let that = this;
      if (data.groupBuyRecordStatus === 0)
        return this.$util.Tips({
          title: "拼团中无法确认收货",
        });
      if (!data.orderNo)
        return this.$util.Tips({
          title: "缺少订单号无法确认收货",
        });
      uni.showModal({
        title: "确认收货",
        content: "为保障权益，请收到货确认无误后，再确认收货",
        success: function (res) {
          if (res.confirm) {
            orderTake(data.orderNo)
              .then((res) => {
                return that.$util.Tips(
                  {
                    title: "操作成功",
                    icon: "success",
                  },
                  function () {
                    that.goOrderDetails(data, true);
                  }
                );
              })
              .catch((err) => {
                return that.$util.Tips({
                  title: err,
                });
              });
          }
        },
      });
    }),

    //替换安全域名
    setDomain: function (url) {
      url = url ? url.toString() : "";
      //本地调试打开,生产请注销
      if (url.indexOf("https://") > -1) return url;
      else return url.replace("http://", "https://");
    },
    //加载订单列表
    getAllOrder() {
      this.page = 1;
      this.loadend = false;
      this.loading = false;
      this.$set(this, "orderList", []);
      this.getOrderList();
    },

    /**
     * 取消订单
     *
     */
    cancelOrder: function (index, orderNo) {
      let that = this;
      if (!orderNo)
        return that.$util.Tips({
          title: "缺少订单号无法取消订单",
        });
      uni.showModal({
        content: "确定取消该订单",
        cancelText: "取消",
        confirmText: "确定",
        showCancel: true,
        confirmColor: "#f55850",
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({
              title: "正在取消中",
            });
            orderCancel(orderNo)
              .then((res) => {
                uni.hideLoading();
                return that.$util.Tips(
                  {
                    title: "取消成功",
                    icon: "success",
                  },
                  function () {
                    that.getAllOrder();
                  }
                );
              })
              .catch((err) => {
                return that.$util.Tips({
                  title: err,
                });
              });
          } else {
          }
        },
      });
    },
    /**
     * 打开支付组件
     *
     */
    goPay: Debounce(function (item) {
      uni.showLoading({
        title: "加载中...",
      });
      if (
        // item.secondType === this.ProductTypeEnum.Integral &&
        // item.payPrice == 0
        Number(item.payPrice) === 0
      ) {
        // 积分商品并且支付金额为0时，直接默认走余额支付的逻辑，订单支付成功跳转到支付结果页
        this.changeOrderPay(
          item.orderNo,
          "yue",
          "yue",
          "integral",
          "integral",
          "0"
        );
      } else {
        // 其他商品走正常流程，去支付收银台页面
        this.getToPayment(item.secondType, item);
      }
    }),
    /**
     * 去订单详情
     */
    goOrderDetails: function (item, status) {
      if (item.groupBuyRecordStatus === 0)
        return this.$util.Tips({
          title: "拼团中无法查看详情",
        });
      if (!item.orderNo)
        return this.$util.Tips({
          title: "缺少订单号无法查看订单详情",
        });
      //虚拟商品
      if (
        item.status == "REFUND_SUCCESS" ||
        item.status == "REFUND_APPLY" ||
        item.status == "NOT_REFUND" ||
        item.status == "UNREFUNDED" ||
        item.status == "APPLYING" ||
        item.status == "REFUNDING" ||
        item.status == "REFUNDED"
      ) {
        uni.navigateTo({
          url:
            "/pages/goods/refund_details/index?refundOrderNo=" +
            item.refundOrderEntity.refundOrderNo,
        });
      } else {
        if (
          item.secondType === this.ProductTypeEnum.CloudDrive ||
          item.secondType === this.ProductTypeEnum.CardPassword
        ) {
          // #ifdef MP
          uni.navigateTo({
            url:
              "/pages/goods/virtual_order_details/index?orderNo=" +
              item.orderNo,
          });
          // #endif
          // #ifndef MP
          uni.navigateTo({
            animationType: animationType.type,
            animationDuration: animationType.duration,
            url:
              "/pages/goods/virtual_order_details/index?orderNo=" +
              item.orderNo,
          });
          // #endif
        } else {
          // #ifdef MP
          if (status) {
            uni.navigateTo({
              url: `/pages/goods/order_details/index?orderNo=${item.orderNo}&status=${status}`,
            });
          } else {
            uni.navigateTo({
              url: "/pages/goods/order_details/index?orderNo=" + item.orderNo,
            });
          }
          // #endif
        }
      }
    },
    /**
     * 切换类型
     */
    statusClick: function (status) {
      if (status == this.orderStatus) return;
      this.orderStatus = status;
      this.loadend = false;
      this.getAllOrder();
    },
    /**
     * 获取订单列表
     */
    getOrderList: function () {
      let that = this;
      if (that.loadend) return;
      if (that.loading) return;
      that.loading = true;
      that.loadTitle = "加载更多";
      let data = {
        keywords: that.keywords,
        // secondType: that.secondType,
      };
      if (
        that.orderStatus == "ALL" ||
        that.orderStatus == "NOT_RECEIVING_CLERK"
      ) {
        // ALL全部订单
        if (that.orderStatus == "ALL") {
          data.refundStatusIds = [
            "UNPAID",
            "COMPLETE",
            "PAID",
            "WRITE_OFF",
            "NOT_RECEIVING_CLERK",
            "PART_SHIPPER",
            "USER_CANCEL",
            "SYS_CANCEL",
          ];
          // 待收货订单
        } else {
          // data.refundStatusIds = ["NOT_RECEIVING_CLERK", "PART_SHIPPER"];
          data.refundStatusIds = ["NOT_RECEIVING_CLERK"];
        }
      } else {
        data.status = that.orderStatus;
      }
      let str = {
        pageNum: that.page,
        pageSize: that.limit,
      };
      getOrderList(data, str)
        .then((res) => {
          let list = res.data.records || [];
          // 获取订单物流信息状态
          let loadend = list.length < that.limit;
          that.orderList = that.$util.SplitArray(list, that.orderList);
          that.$set(that, "orderList", that.orderList);
          that.orderList?.forEach((e) => {
            if (e.status == 4) {
              orderInvoiceListInfo(e.orderNo).then((res) => {
                if (res.data.invoiceList.length)
                  express(res.data.invoiceList[0].id).then((res) => {
                    if (res.data) {
                      let mark = res.data.records.length
                        ? res.data.records[0].status
                        : "";
                      that.$set(e, "mark", mark);
                    }
                  });
              });
            }
          });
          that.loadend = loadend;
          that.loading = false;
          that.loadTitle = loadend ? "我也是有底线的" : "加载更多";
          that.page = that.page + 1;
          that.isShow = true;
        })
        .catch((err) => {
          that.loading = false;
          that.loadTitle = "加载更多";
        });
    },

    /**
     * 删除订单
     */
    delOrder: function (orderNo, index) {
      uni.showModal({
        content: "确定删除该订单",
        cancelText: "取消",
        confirmText: "确定",
        showCancel: true,
        confirmColor: "#f55850",
        success: (res) => {
          if (res.confirm) {
            let that = this;
            let event =
              this.orderState == "1" ? orderDel(orderNo) : oldOrderDel(orderNo);
            event
              .then((res) => {
                that.getAllOrder();
                return that.$util.Tips({
                  title: "删除成功",
                  icon: "success",
                });
              })
              .catch((err) => {
                return that.$util.Tips({
                  title: err,
                });
              });
          } else {
          }
        },
      });
    },
    // 返回上一页
    toBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    //搜索
    search() {
      this.orderList = [];
      this.loadend = false;
      this.loading = false;
      this.page = 1;
      this.getOrderList();
    },
  },
  onReachBottom: function () {
    this.getOrderList();
  },
};
</script>
<style scoped lang="scss">
.mark {
  position: absolute;
  width: 200rpx;
  left: 30rpx;
  color: #e93323;
  display: -webkit-box; /* 将元素设置为弹性盒子 */
  -webkit-box-orient: vertical; /* 设置内容垂直排列 */
  -webkit-line-clamp: 1; /* 限制显示的行数 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  line-height: 1.5; /* 行高 */
  max-height: 3em; /* 最大高度（行高 × 行数） */
}
.activity {
  width: 56rpx;
  height: 32rpx;
  border-radius: 4rpx;
  opacity: 1;
  display: inline-block;
  color: #fff;
  margin-right: 8rpx;
  line-height: 32rpx;
  text-align: center;
  font-size: 20rpx;
}

.mp-bg {
  border-top: solid 4rpx #f6f6f6;
  top: 0rpx;
  position: fixed;
  left: 0;
  width: 100%;
  background: #fff;
  /* #ifdef MP*/
  padding: 0 30rpx;
  /* #endif */

  z-index: 99;
}

.my-order {
  .header {
    height: 250rpx;
    padding: 0 30rpx;
  }
}
.mt270 {
  margin-top: 270rpx !important;
}
.mt100 {
  margin-top: 100rpx !important;
}
.bg_color {
  @include main_bg_color(theme);
}

.my-order .header .picTxt {
  height: 190rpx;
}

.my-order .header .picTxt .text {
  color: rgba(255, 255, 255, 0.8);
  font-size: 26rpx;
  font-family: "Guildford Pro";
}

.my-order .header .picTxt .text .name {
  font-size: 34rpx;
  font-weight: bold;
  color: #fff;
  margin-bottom: 20rpx;
}

.my-order .header .picTxt .pictrue {
  width: 120rpx;
  height: 120rpx;
}

.my-order .header .picTxt .pictrue image {
  width: 100%;
  height: 100%;
}
.goodsImg {
  width: 164rpx;
  height: 164rpx;
  border-radius: 17rpx;
  border: 2rpx solid #eae4e4;
}
.nav {
  margin-top: 10rpx;
  background-color: #fff;
  justify-content: space-between;
  align-items: center;
}

.nav .item {
  font-size: 30rpx;
  color: #282828;
  padding: 25rpx 0;
  display: inline-block;
}

.nav .item.on {
  /* #ifdef H5 || MP */
  font-weight: bold;
  /* #endif */
  /* #ifdef APP-PLUS */
  color: #000;
  /* #endif */
  position: relative;
  @include main_color(theme);
  font-size: 30rpx;
}

.nav .item .num {
  margin-top: 18rpx;
}

.my-order .list {
  width: 690rpx;
  margin: 14rpx auto 0 auto;
}

.my-order .list .item {
  background-color: #fff;
  border-radius: 14rpx;
  margin-bottom: 14rpx;
}

.my-order .list .item .title {
  height: 100rpx;
  margin: 16rpx 34rpx 0rpx 34rpx;
  border-bottom: 1rpx solid #f5f5f5;
  font-size: 28rpx;
  color: #282828;
}
.points {
  margin-top: 22rpx;
  font-size: 26rpx;
  color: #11cc7b;
}
.my-order .list .item .title .sign {
  font-size: 24rpx;
  padding: 0 13rpx;
  height: 36rpx;
  margin-right: 15rpx;
  border-radius: 18rpx;
  @include coupons_border_color(theme);
  @include main_color(theme);
}

.my-order .list .item .item-info {
  margin: 0rpx 34rpx;
  padding: 30rpx 0rpx;
  // margin-top: 22rpx;
  border-bottom: 1rpx solid #fbf7f7;
}

.my-order .list .item .item-info .pictrue {
  width: 164rpx;
  height: 164rpx;
  border: 2rpx solid #eae4e4;
  border-radius: 17rpx;
}

.my-order .list .item .item-info .pictrue image {
  width: 100%;
  height: 100%;
  border-radius: 17rpx;
  overflow: hidden;
}

.my-order .list .item .item-info {
  .nameBox {
    position: relative;
    height: 164rpx;
  }
  .assist {
    width: fit-content;
    padding: 7rpx 14rpx;
    border-radius: 7rpx;
    border: 2rpx solid #eb3f3a;
    font-size: 20rpx;
    color: #eb3f3a;
  }
  .text {
    font-size: 28rpx;
    color: #999;
    margin-left: 30rpx;
    flex: 1;
  }
}

.my-order .list .item .item-info .text .name {
  width: 296rpx;
  font-size: 26rpx;
  color: #272727;
}

.my-order .list .item .item-info .text .money {
  text-align: right;
  .num {
    font-size: 24rpx;
    color: #b2aeae;
    margin-top: 12rpx;
  }
}

.font_color {
  font-weight: 600;
  position: relative;
  top: 4rpx;
  font-size: 30rpx;
  @include main_color(theme);
}

.my-order .list .item .totalPrice {
  font-size: 26rpx;
  color: #999;
  text-align: right;
  margin: 20rpx 0 0 30rpx;
  padding: 0 30rpx 20rpx 0;
  border-bottom: 1rpx solid #fbf7f7;
}

.my-order .list .item .totalPrice .money {
  font-size: 32rpx;
  font-weight: bold;
  margin-left: 10rpx;
  @include price_color(theme);
}

.my-order .list .item .bottom {
  position: relative;
  height: 140rpx;
  padding: 0 30rpx;
}

.my-order .list .item .bottom .bnt {
  width: 176rpx;
  height: 60rpx;
  text-align: center;
  line-height: 60rpx;
  color: #fff;
  border-radius: 50rpx;
  font-size: 27rpx;
}

.my-order .list .item .bottom .bnt.cancelBnt {
  border: 1rpx solid #ddd;
  color: #aaa;
}

.my-order .list .item .bottom .bnt ~ .bnt {
  margin-left: 17rpx;
}

.noCart {
  margin-top: 171rpx;
  padding-top: 0.1rpx;
}

.noCart .pictrue {
  width: 414rpx;
  height: 336rpx;
  margin: 78rpx auto 56rpx auto;
}
.pd-12 {
  padding: 12rpx 0rpx;
}
.noCart .pictrue image {
  width: 100%;
  height: 100%;
}

.icon-xiangyou {
  font-size: 24rpx;
}

.default_txt {
  font-size: 26rpx;
  color: #999;
  text-align: center;
}

.searchCon {
  padding: 10rpx 0rpx;
  align-items: center;

  .search {
    flex: 1;
    height: 60rpx;
    padding: 0 32rpx;
    border-radius: 36rpx;
    background: #f5f5f5;
    margin-left: 5px;

    .iconfont {
      margin-right: 16rpx;
      font-size: 30rpx;
      color: #999999;
    }

    .inputs {
      flex: 1;
      font-size: 28rpx;
      color: #333;
    }

    .placeholder {
      font-size: 26rpx;
      color: #ccc;
    }
  }
  .btn {
    width: 72rpx;
    height: 60rpx;
    line-height: 60rpx;
    margin-left: 20rpx;
    background: #ffffff;
    text-align: center;
    font-size: 30rpx;
    color: #282828;

    .iconfont {
      font-size: 32rpx;
      line-height: 72rpx;
      color: #666666;
    }
  }
}
.footerPar {
  margin-bottom: 10rpx;
}
.topic {
  font-size: 30rpx;
  color: #272727;
  font-weight: bold;
  margin-left: 19rpx;
}
.generate-posters {
  width: 100%;
  height: 318rpx;
  background-color: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 388;
  transform: translate3d(0, 100%, 0);
  transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  border-top: 1rpx solid #eee;

  .generateCon {
    height: 220rpx;
  }

  .generateClose {
    height: 98rpx;
    font-size: 28rpx;
    color: #333333;
    border-top: 1px solid #eee;
  }

  .item {
    .pictrue {
      width: 96rpx;
      height: 96rpx;
      border-radius: 50%;
      margin: 0 auto 6rpx auto;

      /deep/image,
      .easy-loadimage,
      image,
      uni-image {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
  }
}
.logoer {
  height: 49rpx;
  width: 49rpx;
}
.pointsPart {
  // padding-bottom: 6rpx;
  .tips {
    padding: 7rpx 12rpx;
    border: 2rpx solid #11cc7b;
    font-size: 20rpx;
    border-radius: 10rpx;
    color: #11cc7b;
  }
}
.generate-posters.on {
  transform: translate3d(0, 0, 0);
}

.generate-posters .item {
  flex: 1;
  text-align: center;
  font-size: 30rpx;
}

.generate-posters .item .iconfont {
  font-size: 80rpx;
  color: #5eae72;
}

.generate-posters .item .iconfont.icon-haibao {
  color: #5391f1;
}

.generate-posters .item .iconfont.icon-haowuquan1 {
  color: #ff954d;
}
</style>
